<template>
  <div class="collection-selector">
    <el-select
      :value="value"
      @change="handleChange"
      :placeholder="placeholder"
      :disabled="disabled"
      :loading="loading"
      clearable
      filterable
      size="mini"
      class="collection-select"
    >
      <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
        class="collection-option"
      >
        <div class="option-content">
          <span
            class="collection-dot"
            :style="{ backgroundColor: option.color }"
          ></span>
          <span class="collection-name">{{ option.label }}</span>
          <span v-if="option.description" class="collection-desc">
            {{ option.description }}
          </span>
        </div>
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { collectionApi } from '@/api/collections'

export default {
  name: 'CollectionSelector',
  
  props: {
    // 当前选中的合集值
    value: {
      type: String,
      default: ''
    },
    
    // 占位符文本
    placeholder: {
      type: String,
      default: '选择合集'
    },
    
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    
    // 是否显示描述信息
    showDescription: {
      type: Boolean,
      default: true
    }
  },
  
  data() {
    return {
      options: [],
      loading: false
    }
  },
  
  async created() {
    await this.loadOptions()
  },
  
  methods: {
    // 加载合集选项
    async loadOptions() {
      this.loading = true
      try {
        this.options = await collectionApi.getOptions()
      } catch (error) {
        console.error('加载合集选项失败:', error)
        // 使用默认选项
        this.options = [
          { label: '未分类', value: '', color: '#C0C4CC' }
        ]
      } finally {
        this.loading = false
      }
    },
    
    // 处理选择变化
    handleChange(value) {
      this.$emit('change', value)
      this.$emit('input', value) // 支持 v-model
    },
    
    // 清空选择
    handleClear() {
      this.$emit('change', '')
      this.$emit('clear')
    }
  }
}
</script>

<style lang="scss" scoped>
.collection-selector {
  .collection-select {
    min-width: 120px;
  }
  
  .collection-option {
    .option-content {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      
      .collection-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      
      .collection-name {
        font-weight: 500;
        color: #303133;
        flex-shrink: 0;
      }
      
      .collection-desc {
        font-size: 12px;
        color: #909399;
        margin-left: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 120px;
      }
    }
  }
}

// 下拉面板样式
:deep(.el-select-dropdown__item) {
  padding: 8px 20px;
  
  &:hover {
    background-color: #f5f7fa;
  }
  
  &.selected {
    font-weight: 600;
    color: #409eff;
    background-color: #f0f9ff;
  }
}
</style>